<!DOCTYPE html>
<html lang="en" xmlns:th="https://thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>展示界面</title>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
</head>
<body>
<h1>所有员工信息</h1>
<table border="1" style="text-align: center" id="dataTable">
    <tr>
        <th colspan="5"></th>
    </tr>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options(<a th:href="@{/rest/toAdd}">add</a>) </th>
    </tr>
    <tr th:each="employee : ${employeeList}">
        <td th:text="${employee.id}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td th:text="${employee.gender}"></td>
        <td>
            <a  class="deleteA" @click="deleteEmployee" th:href="@{'/rest/employee/'+${employee.id}}"> delete</a>
            <a th:href="@{'/rest/employee/'+${employee.id}}"> update</a>
        </td>
    </tr>
</table>
<form id="delete_form" method="post">
    <input type="hidden" name="_method" value="delete">
</form>
<script type="text/javascript">
    var vue=new Vue({
        el:"#dataTable",
        methods:{
            deleteEmployee:function (event){
                //通过 id  获取表单标签
                var delete_form=document.getElementById("delete_form");
                delete_form.action=event.target.href;
                delete_form.submit();
                //抑制超链接的自动提交行为
                event.preventDefault();

            }
        }
    });
</script>
</body>
</html>